﻿<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mail Read</title>
</head>
<body>
	<div class="pageheader">
		<h2>
			<i class="fa fa-envelope"></i> Email <span>Subtitle goes here...</span>
		</h2>
		<div class="breadcrumb-wrapper">
			<span class="label">You are here:</span>
			<ol class="breadcrumb">
				<li><a href="index.html">Bracket</a></li>
				<li class="active">Email</li>
			</ol>
		</div>
	</div>

	<div class="contentpanel panel-email">

		<div class="row">
			<div class="col-sm-3 col-lg-2">
				<a href="compose.html" class="btn btn-danger btn-block btn-compose-email">Compose Email</a>

				<ul class="nav nav-pills nav-stacked nav-email">
					<li class="active"><a href="email.html"> <span
							class="badge pull-right">2</span> <i
							class="glyphicon glyphicon-inbox"></i> Inbox
					</a></li>
					<li><a href="#"><i class="glyphicon glyphicon-star"></i>
							Starred</a></li>
					<li><a href="#"><i class="glyphicon glyphicon-send"></i>
							Sent Mail</a></li>
					<li><a href="#"> <span class="badge pull-right">3</span> <i
							class="glyphicon glyphicon-pencil"></i> Draft
					</a></li>
					<li><a href="#"><i class="glyphicon glyphicon-trash"></i>
							Trash</a></li>
				</ul>

				<div class="mb30"></div>

				<h5 class="subtitle">Folders</h5>
				<ul class="nav nav-pills nav-stacked nav-email mb20">
					<li><a href="${ctx}/demo/email.html"> <span class="badge pull-right">2</span>
							<i class="glyphicon glyphicon-folder-open"></i> Conference
					</a></li>
					<li><a href="#"><i class="glyphicon glyphicon-folder-open"></i>
							Newsletter</a></li>
					<li><a href="#"><i class="glyphicon glyphicon-folder-open"></i>
							Invitations</a></li>
					<li><a href="#"> <i
							class="glyphicon glyphicon-folder-open"></i> Promotions
					</a></li>
				</ul>

			</div>
			<!-- col-sm-3 -->

			<div class="col-sm-9 col-lg-10">

				<div class="panel panel-default">
					<div class="panel-body">

						<div class="pull-right">
							<div class="btn-group mr10">
								<button class="btn btn-sm btn-white tooltips" type="button"
									data-toggle="tooltip" title="Archive">
									<i class="glyphicon glyphicon-hdd"></i>
								</button>
								<button class="btn btn-sm btn-white tooltips" type="button"
									data-toggle="tooltip" title="Report Spam">
									<i class="glyphicon glyphicon-exclamation-sign"></i>
								</button>
								<button class="btn btn-sm btn-white tooltips" type="button"
									data-toggle="tooltip" title="Delete">
									<i class="glyphicon glyphicon-trash"></i>
								</button>
							</div>

							<div class="btn-group mr10">
								<div class="btn-group nomargin">
									<button data-toggle="dropdown"
										class="btn btn-sm btn-white dropdown-toggle tooltips"
										type="button" title="Move to Folder">
										<i class="glyphicon glyphicon-folder-close mr5"></i> <span
											class="caret"></span>
									</button>
									<ul class="dropdown-menu">
										<li><a href="#"><i
												class="glyphicon glyphicon-folder-open mr5"></i> Conference</a></li>
										<li><a href="#"><i
												class="glyphicon glyphicon-folder-open mr5"></i> Newsletter</a></li>
										<li><a href="#"><i
												class="glyphicon glyphicon-folder-open mr5"></i> Invitations</a></li>
										<li><a href="#"><i
												class="glyphicon glyphicon-folder-open mr5"></i> Promotions</a></li>
									</ul>
								</div>
								<div class="btn-group nomargin">
									<button data-toggle="dropdown"
										class="btn btn-sm btn-white dropdown-toggle tooltips"
										type="button" title="Label">
										<i class="glyphicon glyphicon-tag mr5"></i> <span
											class="caret"></span>
									</button>
									<ul class="dropdown-menu">
										<li><a href="#"><i
												class="glyphicon glyphicon-tag mr5"></i> Web</a></li>
										<li><a href="#"><i
												class="glyphicon glyphicon-tag mr5"></i> Photo</a></li>
										<li><a href="#"><i
												class="glyphicon glyphicon-tag mr5"></i> Video</a></li>
									</ul>
								</div>
							</div>

							<div class="btn-group mr5">
								<button class="btn btn-sm btn-white" type="button">
									<i class="fa fa-reply"></i>
								</button>
								<button data-toggle="dropdown"
									class="btn btn-sm btn-white dropdown-toggle" type="button">
									<span class="caret"></span>
								</button>
								<ul role="menu" class="dropdown-menu pull-right">
									<li><a href="#">Reply to All</a></li>
									<li><a href="#">Forward</a></li>
									<li><a href="#">Print</a></li>
									<li><a href="#">Delete Message</a></li>
									<li><a href="#">Report Spam</a></li>
								</ul>
							</div>

						</div>
						<!-- pull-right -->

						<div class="btn-group mr10">
							<button class="btn btn-sm btn-white tooltips" type="button"
								data-toggle="tooltip" title="Read Previous Email">
								<i class="glyphicon glyphicon-chevron-left"></i>
							</button>
							<button class="btn btn-sm btn-white tooltips" type="button"
								data-toggle="tooltip" title="Read Next Email">
								<i class="glyphicon glyphicon-chevron-right"></i>
							</button>
						</div>

						<div class="read-panel">

							<div class="media">
								<a href="#" class="pull-left"> <img alt=""
									src="${ctx}/static/images/photos/user2.png" class="media-object">
								</a>
								<div class="media-body">
									<span class="media-meta pull-right">Yesterday at 1:30am</span>
									<h4 class="text-primary">Nusja Nawancali</h4>
									<small class="text-muted">From: hisemail@hisemail.com</small>
								</div>
							</div>
							<!-- media -->

							<h4 class="email-subject">Lorem ipsum dolor sit amet,
								consectetur adipisicing elit</h4>

							<p>Sed do eiusmod tempor incididunt ut labore et dolore magna
								aliqua. Ut enim ad minim veniam, quis nostrud exercitation
								ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
								aute irure dolor in reprehenderit in voluptate velit esse cillum
								dolore eu fugiat nulla pariatur. Excepteur sint occaecat
								cupidatat non proident, sunt in culpa qui officia deserunt
								mollit anim id est laborum.</p>
							<p>Sed ut perspiciatis unde omnis iste natus error sit
								voluptatem accusantium doloremque laudantium, totam rem aperiam,
								eaque ipsa quae ab illo inventore veritati.</p>
							<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur
								aut odit aut fugit, sed quia consequuntur magni dolores eos qui
								ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
								dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
								sed quia non</p>

							<p>
								<strong>Sed do eiusmod tempor incididunt ut labore et
									dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
									exercitation ullamco laboris nisi ut aliquip ex ea commodo
									consequat.</strong>
							</p>
							<p>Duis aute irure dolor in reprehenderit in voluptate velit
								esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
								occaecat cupidatat non proident, sunt in culpa qui officia
								deserunt mollit anim id est laborum.</p>
							<p>Sed ut perspiciatis unde omnis iste natus error sit
								voluptatem accusantium doloremque laudantium, totam rem aperiam,
								eaque ipsa quae ab illo inventore veritati.</p>
							<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur
								aut odit aut fugit, sed quia consequuntur magni dolores eos qui
								ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
								dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
								sed quia non</p>

							<br />

							<div class="media">
								<a href="#" class="pull-left"> <img alt=""
									src="${ctx}/static/images/photos/user2.png" class="media-object">
								</a>
								<div class="media-body">
									<textarea class="form-control" placeholder="Reply here..."></textarea>
								</div>
							</div>
							<!-- media -->

						</div>
						<!-- read-panel -->

					</div>
					<!-- panel-body -->
				</div>
				<!-- panel -->

			</div>
			<!-- col-sm-9 -->

		</div>
		<!-- row -->

	</div>


	<script src="${ctx}/static/js/custom.js"></script>

</body>
</html>
